<template>
  <div>
    <div class="bar-wrapper">
      <div style="width: 100%; height: 210px; background: transparent;" id="bar"></div>
      <div class="foot">
        <div class="foot-item-name">成交净买额</div>
        <div
            v-for="(amount, index) in netPurchaseAmount"
            :key="index"
            class="foot-item"
            :style="getItem(amount)">
          {{ amount }}亿元
        </div>
      </div>
    </div>
  </div>
</template>

<script src="../assets/Chart.js"></script>

<style scoped>
#bar {
  background: transparent;
}

.foot {
  display: flex;
  padding-bottom: 10px;
  width: min-content;
}

.foot-item-name {
  width: 76px;
  height: 20px;
  color: #6799c4;
  background-color: #0e2257;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  margin-right: 5px;
}

.foot-item {
  width: 126px;
  height: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  margin-right: 2px;
}
</style>
